<!-- 约玩项目 -->
<template>
	<view class="publish-projectBox">
		<text class="title">选择约玩项目</text>

		<view class="content">

			<view :class="{
				'content-item':true,
				'content-item2': res.status
			}" v-for="(res,index) in pageData" :key="index" @click="change(index)">

				<image class="content-item-image" :src="res.image" mode=""></image>

				<text class="content-item-text">{{res.title }}</text>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => []
			},

			submit: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				// 页面数据
				pageData: []
			};
		},
		computed: {},
		created() {


		},
		watch: {

			data: {
				handler() {
					this.initListData()
				},
				deep: true,
				immediate: true
			}
		},


		methods: {
			/**
			 * 更改选择项目
			 */
			change(val) {

				this.pageData.map((res, index) => {
					if (index === val) {
						res.status = true

						this.$emit('submit', res)
					} else {
						res.status = false
					}
				})



			},

			/**
			 * 初始化选择列表
			 */
			initListData() {

				this.pageData = []

				if (this.data.length > 0) {
					this.data.map(res => {
						res.cateList.map(res2 => {
							this.pageData.push({
								id: res2.id,
								image: res2.picUrl,
								title: res2.title,
								unit: res2.unit,
								status: false,
								activityPrice: res2.activityPrice
							})
						})
					})
				}

				// 初始化选中一个
				this.change(0)

			},


		}
	}
</script>

<style lang="less" scoped>
	.publish-projectBox {
		#flex(column, center, center);
		#padding(60rpx 24rpx 0 24rpx);

		.title {
			#font(32rpx, #333, 600);
			margin-bottom: 36rpx;
		}

		.content {
			display: flex;
			flex-wrap: wrap;

			.content-item {
				#flex(column, center, center);
				#padding(24rpx 0);
				#box(calc((100% - 72rpx) / 4), auto, 24rpx, #F6F7FD);

				margin: 0 24rpx 24rpx 0;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.content-item-image {
					#box(60rpx, 60rpx, 50%);
				}

				.content-item-text {
					#font(24rpx, #333);
					margin-top: 12rpx;
				}
			}

			.content-item2 {
				background-color: #EC606F;

				.content-item-text {
					color: #fff;
				}
			}

		}


	}
</style>